<template>
	<view class="news">
		<!-- 头部导航 -->
		<uni-nav-bar statusBar :fixed="true" class="navBar" :height="'88rpx'" :backgroundColor="'#fff'"
			style="font-size: 36rpx;" :color="'#000'" :border="false" title="消息"></uni-nav-bar>
		<!-- 消息列表 -->
		<view class="text-center p-t50 p-b50" v-if="newsList.length<1">
			<image :src="imgUrl+'no_order.png'" mode="widthFix" class="img" style="width:232rpx;"></image>
			<view class="f-s14 co_666 p-t10">暂时没有消息哦~</view>
		</view>
		<view class="char-list" v-if="newsList.length">
			<uni-list>
				<uni-list-item class="listItem" v-for="(item,index) in newsList" :key="item.id" >
					<!-- 自定义 header -->
					<!-- <view slot="header" class="slot-box">
						<image class="slot-image" :src="imgUrl+item.avatar" mode="widthFix"></image>
					</view> -->
					
					<!-- 自定义 body -->
					<view slot="body" class="content" @click="Clkshow(item.id)">
						
						<view class="title">{{item.title}}</view>
						<!-- <view class="note">{{item.content}}</view> -->
						<!-- <rich-text :nodes="item.content"></rich-text> -->
					</view>
					
					
					
				</uni-list-item>
			</uni-list>
		</view>
		<view class="fixed">
			<!-- <Tabbar :value='1' /> -->
		</view>
	</view>
</template>

<script>
	import {getNewList ,getMessage} from "./api.js"
	export default {
		onReady(){
			this.getNewListData()
		},
		components: {},
		onReachBottom (){
			console.log("触底")
		},
		data() {
			return {
				imgUrl: this.$store.state.imgUrl,
				newsList:[],
			}
		},
		onLoad() {
			
		},
		methods: {
			//获取消息列表
			getNewListData(){
				uni.showLoading({title:'加载中'})
				getNewList({page:1,limit:10}).then(res=>{
					if(res.code==200){
						uni.hideLoading()
						this.newsList =res.data
						uni.setStorageSync('msg',res.data[0].is_read)
					}
				})
			},
			navigateTo(e){
				uni.navigateTo({
					url:e
				})
			},
			Clkshow(v){
				getMessage({id:v}).then(res=>{
				})
			}
		}
	}
</script>

<style lang="less">
	.top{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.news{
		width: 100%;
		height: 100%;
	}
	.listItem {
		width: 100%;
		min-height: 144rpx;
		background: #FFFFFF;
		// 头像
		.slot-box {
			width: 96rpx;
			height: 96rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.content {
			width: 100%;
			min-height: 100rpx;
			
			padding: 20rpx;
			box-sizing: border-box;
			

			.title {
				width: 100%;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #262626;
			}

			.note {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
				margin-top: 20rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;

			}
		}
	}

	.chat-custom-right {
		width: 60rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		margin-left: 100rpx;


		.chat-custom-right-top {
			width: 32rpx;
			height: 28rpx;
			background: #FF5A5A;
			border-radius: 16rpx;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 15rpx;

			text {
				color: #fff;
				font-size: 20rpx;
			}

		}

		.chat-custom-right-bottom {
			width: 300rpx;
			text-align: center;
			font-size: 24rpx;
			color: #999999;
		}
	}
	
</style>
